{include file="common/head" /}
<style>
    .layui-carousel-ind
    {
        position: absolute;
    }
    .layui-carousel-ind ul{
        position: absolute;
        right: 0;top: -5px;
        background: none;
    }
    .layui-carousel-ind ul:hover{
        background: none;
    }
    .layui-carousel-ind ul .layui-this{
        background: #e2e2e2;
    }
    .layui-carousel-ind ul :hover{
        background: #e2e2e2;
    }
    .layui-carousel-ind ul li{
        background:black;
    }
    textarea{
        font-family: "微软雅黑" !important;
        padding: 10px;
    }
    .bolds{
        font-weight:bold;
    }
    .font-icons{
        font-size:30px;
    }



</style>
<div class="layui-col-sm12 layui-col-md12">
    <div class="layui-card">
        <blockquote class="layui-elem-quote" style="background: #fff !important;">
            <legend>
                <div>
                    <i class="layui-icon">&#xe66f;</i> 欢迎登陆：
                    <span class="x-red">{:session('usernames')} </span>
                    <span id="nowTime"></span>
                </div>
            </legend>
        </blockquote>
    </div>
</div>
<div class="layui-row layui-col-space20">
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body chart-card">
                <div class="chart-header">
                    <div class="metawrap">
                        <div class="meta">
                            <span>总账号数</span>
                        </div>
                        <div class="total">{$infos.accountcount}</div>
                        <div class="layui-layout-right">
                            <i class="fa fa-address-book font-icons" aria-hidden="true" style="color:#177ce3;"></i>
                        </div>
                    </div>
                </div>
                <div class="chart-body">
                    <div class="contentwrap">

                    </div>
                </div>
                <div class="chart-footer">
                    <div class="field">
                        <span>日账号量</span>
                        <span class="bolds">{$infos.accounttoday}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body chart-card">
                <div class="chart-header">
                    <div class="metawrap">
                        <div class="meta">
                            <span>总用户数</span>
                        </div>
                        <div class="total">126,560</div>
                    </div>
                </div>
                <div class="chart-body">
                    <div class="contentwrap">

                    </div>
                </div>
                <div class="chart-footer">
                    <div class="field">
                        <span>日注册量</span>
                        <span>321</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body chart-card">
                <div class="chart-header">
                    <div class="metawrap">
                        <div class="meta">
                            <span>总用户数</span>
                        </div>
                        <div class="total">126,560</div>
                    </div>
                </div>
                <div class="chart-body">
                    <div class="contentwrap">

                    </div>
                </div>
                <div class="chart-footer">
                    <div class="field">
                        <span>日注册量</span>
                        <span>321</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="infos layui-btns layui-btn-red">
                        <i class="fa fa-user-o facolors" aria-hidden="true"></i>
                    </div> 我的个人信息
                </div>
                <div class="layui-card-body">
                    <table  class="layui-table" lay-even lay-skin="row">
                        <tbody>
                            <tr>
                                <th>你好，{:session('usernames')} 欢迎你登录！</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th>本次登录时间</th>
                                <td>{:date('Y-m-d H:i:s',$userinfo.logintime)}</td>
                            </tr>
                            <tr>
                                <th>上次登录时间</th>
                                <td>
                                    {if session('logintimes') neq ''}
                                    {:date('Y-m-d H:i:s',session('logintimes'))}
                                    {/if}
                                </td>
                            </tr>
                            <tr>
                                <th>上次登录IP</th>
                                <td>{:session('loginips')}</td>
                            </tr>
                            <tr>
                                <th>上次登录IP地址</th>
                                <td>{:session('ipadresss')}</td>
                            </tr>
                            <tr>
                                <th>登陆次数</th>
                                <td>{$userinfo.loginnum}</td>
                            </tr>
                            <tr>
                                <th>手机号码</th>
                                <td>{$userinfo.phone}</td>
                            </tr>
                            <tr>
                                <th>当前时间</th>
                                <td id="nowTimes"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="infos layui-btns layui-btn-blue">
                        <i class="fa fa-building facolors" aria-hidden="true"></i>
                    </div> 近七日账号量
                </div>
                <div class="layui-card-body">
                    <div id="container" style="width: 100%;height:315px"></div>
                </div>
            </div>
        </div>
       <!-- <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">标题</div>
                <div class="layui-card-body">
                    内容
                </div>
            </div>
        </div>-->
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="infos layui-btns layui-btn-blue">
                        <i class="fa fa-building facolors" aria-hidden="true"></i>
                    </div> 近七日账号量
                </div>
                <div class="layui-card-body">
                    <div id="container" style="width: 100%;height:300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">标题</div>
                <div class="layui-card-body">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div>条目1</div>
                            <div>条目2</div>
                            <div>条目3</div>
                            <div>条目4</div>
                            <div>条目5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       <!-- <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">标题</div>
                <div class="layui-card-body">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div>条目1</div>
                            <div>条目2</div>
                            <div>条目3</div>
                            <div>条目4</div>
                            <div>条目5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>


    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">账号管理</li>
                    <li>活跃度</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                       y
                    </div>
                    <div class="layui-tab-item">
                        ddd
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common/foot" /}
<script type="text/javascript" src="__STATIC__/common/js/echarts.min.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: '200px'
            ,arrow: 'none' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,interval: 5000
        });
    });
</script>
<script type="text/javascript">
    //获取系统时间
    var newDate = '';
    getLangDate();
    //值小于10时，在前面补0
    function dateFilter(date){
        if(date < 10){return "0"+date;}
        return date;
    }
    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = timeValue+"好！当前时间为： "+newDate+"　"+week;
        document.getElementById("nowTimes").innerHTML = newDate+"　"+week;
        setTimeout("getLangDate()",1000);
    }
</script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };

    option = {
        /* backgroundColor: '#F2F2F2',
         title: {
             left: 'center',
             textStyle: {
                 color: '#eee'
             }
         },
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        title: {
            text: '账号管理',
            x:'center',
            y:'bottom',

        },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['日账号量']
        },//侧边栏显示
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                //magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: [
                    {volist name="list" id="vo"}
                    '{$vo.time}',
                    {/volist}
                ],
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '日账号量',
                type: 'bar',
                barWidth: '40%',//柱宽
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#29adeb'
                        }, {
                            offset: 1,
                            color: '#177ce3'
                        }]),
                    }
                },

                data:[
                    {volist name="list" id="vo"}
                    {$vo.count},
                    {/volist}
                ]
            },
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
